import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Item {


    ScrollView {
        anchors.fill: parent

        Grid {

            anchors.fill: parent
            spacing: 10
            padding: 10
            columns: 2

            Rectangle {
                width: 240
                height: 240
                color: "white"

                Text {
                    text: "DirectionalBlur"
                    color: "#333"
                    font.pointSize: 13
                    font.bold: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Image {
                    id: butterfly
                    source: "qrc:/images/butterfly.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    smooth: true
                    visible: false
                }

                DirectionalBlur {
                    anchors.fill: butterfly
                    source: butterfly
                    angle: 90
                    length: 32
                    samples: 24
                }
            }

            Rectangle {
                width: 240
                height: 240
                color: "white"

                Text {
                    text: "GaussianBlur（高斯）"
                    color: "#333"
                    font.pointSize: 13
                    font.bold: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Image {
                    id: butterfly2
                    source: "qrc:/images/butterfly.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    smooth: true
                    visible: false
                }

                GaussianBlur {
                    anchors.fill: butterfly2
                    source: butterfly2
                    radius: 8
                    samples: 16
                }
            }

            Rectangle {
                width: 240
                height: 240
                color: "white"

                Text {
                    text: "FastBlur"
                    color: "#333"
                    font.pointSize: 13
                    font.bold: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Image {
                    id: butterfly3
                    source: "qrc:/images/butterfly.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    smooth: true
                    visible: false
                }

                FastBlur {
                    anchors.fill: butterfly3
                    source: butterfly3
                    radius: 32
                }
            }

            Rectangle {
                width: 240
                height: 240
                color: "white"

                Text {
                    text: "RecursiveBlur"
                    color: "#333"
                    font.pointSize: 13
                    font.bold: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Image {
                    id: butterfly4
                    source: "qrc:/images/butterfly.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    smooth: true
                    visible: false
                }

                RecursiveBlur {
                    anchors.fill: butterfly4
                    source: butterfly4
                    radius: 7.5
                    loops: 50
                }
            }

            Rectangle {
                width: 240
                height: 240
                color: "white"

                Text {
                    text: "MaskedBlur"
                    color: "#333"
                    font.pointSize: 13
                    font.bold: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Image {
                    id: butterfly5
                    source: "qrc:/images/butterfly.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    smooth: true
                    visible: false
                }

                LinearGradient {
                    id: mask
                    anchors.fill: butterfly5
                    gradient: Gradient {
                        GradientStop { position: 0.2; color: "#ffffffff" }
                        GradientStop { position: 0.5; color: "#00ffffff" }
                    }
                    start: Qt.point(0, 0)
                    end: Qt.point(300, 0)
                    visible: false
                }

                MaskedBlur {
                    anchors.fill: butterfly5
                    source: butterfly5
                    maskSource: mask
                    radius: 16
                    samples: 24
                }
            }


            Rectangle {
                width: 240
                height: 240
                color: "white"

                Text {
                    text: "RadialBlur"
                    color: "#333"
                    font.pointSize: 13
                    font.bold: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Image {
                    id: butterfly6
                    source: "qrc:/images/butterfly.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    smooth: true
                    visible: false
                }

                RadialBlur {
                    anchors.fill: butterfly6
                    source: butterfly6
                    angle: 30
                    samples: 24
                }
            }

            Rectangle {
                width: 240
                height: 240
                color: "white"

                Text {
                    text: "ZoomBlur"
                    color: "#333"
                    font.pointSize: 13
                    font.bold: true
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Image {
                    id: butterfly7
                    source: "qrc:/images/butterfly.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    smooth: true
                    visible: false
                }

                ZoomBlur {
                    anchors.fill: butterfly7
                    source: butterfly7
                    length: 48
                    samples: 24
                }
            }
        }
    }

}
